<template>
	<view>
		<view class="head">
			<view class="acea-row row-middle">
				<image class="logo" :src="storeInfo.image" mode="aspectFit"></image>
				<view class="">
					<view class="">
						<text class="store-name">{{ storeInfo.name }}</text>
						<text class="store-des">(投资人)</text>
					</view>
					<view class="time">
						营业时间: {{ storeInfo.day_time }}
					</view>
				</view>
			</view>
		</view>
		<view class="mid-content">
			<view class="statistics_card">
				<view class="header_hd acea-row row-middle row-between-wrapper">
					<view class="title acea-row row-column">
						<text>门店订单</text>
						<text>{{date}}</text>
					</view>
					<view class="">({{ count }}条)</view>
				</view>
			</view>
		</view>
		<view class="store_order_list">
			<view class="item" v-for="(item, index) in orderList" :key="index">
				<view class="order_num">订单编号: {{ item.order_id }}</view>
				<view class="order_user">
					<text class="name line1">下单人: {{ item.nickname || '无' }}</text>
					<text>{{ item._add_time }}</text>
				</view>
				<view class="order_info">
					<view class="row" v-for="(v, k) in item.cartInfo" :key="k">
						<text class="title">{{ v.productInfo.store_name }}</text>
						<text>x {{ v.cart_num }}</text>
					</view>
					<view class="" style="margin-top: 30rpx;">
						<view class="rows" v-if="parseInt(item.use_integral) > 0">
							<text>积分抵扣</text>
							<text style="color: #D9001B;">-{{ item.use_integral }}</text>
						</view>
						<view class="rows" v-if="parseInt(item.coupon_price) > 0">
							<text>优惠券</text>
							<text style="color: #D9001B;">-{{ item.coupon_price }}</text>
						</view>
					</view>
					<view class="total">小计: ￥{{ item.pay_price }}</view>
				</view>
			</view>
			<view v-if="orderList.length == 0" class="empty acea-row row-column row-middle padding30">
				<image src="../static/wechat_login.png" mode=""></image>
				<text class="padding30 text-gray">没有相关数据!</text>
			</view>
			<view class="nomore acea-row row-center-wrapper padding20" v-else>
				{{ loadStatus }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		investorStoreDetail,
		onedayNum,
		onedayOrders
	} from '@/api/store.js'
	export default {
		data() {
			return {
				storeInfo: {},
				year: '',
				date: '',
				orderList: [],
				count: 0,
				page: 1,
				loadStatus: '加载中...',
				loading: true,
				limit: 15,
				storeId:''
			};
		},
		onLoad(opt) {
			if(opt.id) {
				this.storeId = opt.id
				this.date = opt.date
				this.getDetail(opt.id)
				this.getOrderCount(opt.id)
				this.getOrderList()
			}
		},
		methods: {
			// 获取门店详情
			getDetail(id) {
				investorStoreDetail({
					store_id: id
				}).then(res => {
					this.storeInfo = res.data
				})
			},
			// 获取某一天得订单数量
			getOrderCount(id) {
				onedayNum({
					times: this.date,
					store_id: id,
				}).then(res => {
					this.count = res.data.count
				})
			},
			// 获取某一天的订单列表
			getOrderList() {
				if(!this.loading) return
				onedayOrders({
					store_id: this.storeId,
					times: this.date,
					page: this.page,
					limit: this.limit
				}).then(res => {
					// console.log(res)
					this.orderList = this.orderList.concat(res.data)
					if(res.data.length < this.limit) {
						this.loading = false
						this.loadStatus = '没有更多了'
					}
					this.page++
				})
			}
		},
		onReachBottom() {
			this.getOrderList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.head {
		width: 100%;
		height: 260rpx;
		background-image: linear-gradient(to right, #39AAF7, #4078F6);
		padding: 50rpx 40rpx;
		color: #fff;

		.logo {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			background-color: #fff;
			border-radius: 50%;
		}

		.store-name {
			font-size: 32rpx;
		}

		.store-des {
			font-size: 24rpx;
		}

		.time {
			color: rgba(255, 255, 255, 0.74);
			font-size: 26rpx;
		}
	}

	.mid-content {
		width: 100%;
		padding: 0 20rpx;
		margin-top: -70rpx;
		margin-bottom: 20rpx;

		.statistics_card {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 25rpx 40rpx;
			box-shadow: 0 5rpx 5rpx 3rpx #eee;
			.header_hd {
				color: #70B603;
				font-weight: 700;
				.title {
					font-size: 30rpx;
				}
			}

		}
	}
	.store_order_list {
		width: 100%;
		padding: 0 20rpx 30rpx;
		.item {
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			.order_num, .order_user {
				padding-bottom: 16rpx;
			}
			.order_user {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				margin-bottom: 30rpx;
				.name {
					display: block;
					width: 340rpx;
				}
			}
			.order_info {
				width: 100%;
				.row, .rows {
					display: flex;
					justify-content: space-between;
					margin-bottom: 15rpx;
					font-size: 30rpx;
					.title {
						width: 450rpx;
						color: #555;
					}
					.numberbox {
						display: flex;
						justify-content: flex-end;
						width: 180rpx;
						text {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 40rpx;
							height: 40rpx;
							font-size: 24rpx;
							border-radius: 50%;
							color: #676868;
						}
						
						input {
							display: block;
							width: 70rpx;
							height: 40rpx;
							font-size: 30rpx;
							text-align: center;
							background-color: #eee;
							margin: 0 10rpx;
							border-radius: 10rpx;
						}
					}
				}
				.rows {
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					align-items: center;
				}
				.total {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 30rpx;
					font-size: 30rpx;
				}
				.btn_group {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 60rpx;
					text {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 140rpx;
						height: 52rpx;
						border-radius: 30rpx;
						font-size: 24rpx;
						border: 1px solid #ccc;
					}
					text:not(:first-child) {
						background-color: #95c51b;
						border: 1px solid #95c51b;
						color: #fff;
					}
					.btn {
						width: 240rpx;
						height: 65rpx;
						margin: 0 auto;
						background-color: #95c51b;
						border: 0;
						font-size: 30rpx;
						border-radius: 40rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>
